import React, { useEffect } from 'react'
import { Map, View } from 'ol'
import { fromLonLat } from 'ol/proj'
import { Tile } from 'ol/layer'
import { XYZ } from 'ol/source'
import styles from './index.css'

/**
 * 首页
 */
const pageWebGIS = () => {
  useEffect(() => {
    new Map({
      target: 'map',
      layers: [
        new Tile({
          source: new XYZ({
            url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
          })
        })
      ],
      view: new View({
        center: fromLonLat([114.30, 30.60]),
        zoom: 8
      })
    });
  }, [])

  return (
    <div className={styles.container}>
      <div className={styles.title}>WebGIS示例</div>
      <div id="map" className={styles.map} ></div>
    </div>
  );
}

export default pageWebGIS
